<template>
  <div>
    <appheader></appheader>
    <apphead :head="Head"></apphead>
    <div class="xtx-bread container" v-if="arr.categories">
      <div class="xtx-bread-item">
        <a href="#/" class="router-link-active">首页</a>
      </div>
      <i class="iconfont icon-angle-right"></i>
      <div class="xtx-bread-item">
        <span>{{ arr.categories[1].name }}</span>
      </div>
      <i class="iconfont icon-angle-right"></i>
      <div class="xtx-bread-item">
        <span>{{ arr.categories[0].name }}</span>
      </div>
      <i class="iconfont icon-angle-right"></i>
      <div class="xtx-bread-item">
        <span>{{ arr.name }}</span>
      </div>
    </div>

    <div class="container">
      <div class="goods-info">
        <div class="media">
          <div class="goods-image">
            <div class="middle">
              <div>
                <img :src="srcstr" title="点击大图预览" />
              </div>
              <div
                v-show="coverLayerShow"
                class="coverLayerMouse"
                :style="coverLayerStyle"
              ></div>
              <div
                class="coverLayerMaskTop"
                @mouseenter="enterHandler"
                @mousemove="moveHandler"
                @mouseout="outHandler"
              ></div>
              <div v-show="coverLayerShow" class="coverLayerRight">
                <div class="coverLayerRightImg">
                  <img :style="coverLayerImg" :src="srcstr" />
                </div>
              </div>
            </div>
            <ul id="small">
              <li
                v-for="item in arr.mainPictures"
                :key="item.id"
                @mouseover="srcmoer(item)"
              >
                <img :src="item" alt="" />
              </li>
            </ul>
          </div>
          <ul class="goods-sales">
            <li data-v-34ceb5ea="">
              <p>销量人气</p>
              <p>200+</p>
              <p><i class="el-icon-s-grid"></i>销量人气</p>
            </li>
            <li>
              <p>商品评价</p>
              <p>400+</p>
              <p><i class="el-icon-s-tools"></i>查看评价</p>
            </li>
            <li>
              <p>收藏人气</p>
              <p>600+</p>
              <p><i class="el-icon-date"></i>收藏商品</p>
            </li>
            <li>
              <p>品牌信息</p>
              <p>苏宁电器</p>
              <p><i class="el-icon-coin"></i>品牌主页</p>
            </li>
          </ul>
        </div>
        <div class="spec">
          <p class="g-name">{{ arr.name }}</p>
          <p class="g-desc">{{ arr.desc }}</p>
          <p class="g-price">
            <span id="news">￥{{ arr.price }}</span
            ><span id="olds">￥{{ arr.oldPrice }}</span>
          </p>
          <div class="g-service">
            <dl>
              <dt>促销</dt>
              <dd>12月好物放送，App领券购买直降120元</dd>
            </dl>
            <dl>
              <dt>配送</dt>
              <dd>
                <span>至</span>
                <div class="xtx-city">
                  <div class="select">
                    <span
                      class="value"
                      @click="clkareaList"
                      :class="{ bgf: showareaList }"
                      >{{ strareaList }}
                      <i class="el-icon-arrow-down"></i>
                    </span>

                    <div class="option" v-show="showareaList">
                      <span
                        v-for="(item, index) in areaList"
                        :key="item.code"
                        @click="optionElsp(item.name, index)"
                        >{{ item.name }}</span
                      >
                    </div>
                  </div>
                </div>
              </dd>
            </dl>
            <dl>
              <dt>服务</dt>
              <dd>
                <span>无忧退货</span><span>快速退款</span><span>免费包邮</span
                ><span>了解详情</span>
              </dd>
            </dl>
          </div>
          <div class="goods-sku">
            <dl>
              <dt>{{ arrnuw.name }}</dt>
              <dd class="ddd">
                <a href="javascript:;" v-if="!arrnuw.values.picture">
                  <img
                    :src="item.picture"
                    alt=""
                    :title="item.name"
                    v-for="(item, index) in arrnuw.values"
                    :key="index"
                    @click="imgactive(item)"
                    :class="{ imgactive: item.checked, disable: item.disable }"
                  />
                </a>
                <div class="spandiv" v-else>
                  <span
                    v-for="(item, index) in arrnuw.values"
                    :key="index"
                    :class="{ imgactive: item.checked, disable: item.disable }"
                    @click="imgactive(item)"
                  >
                    {{ item.name }}</span
                  >
                </div>
              </dd>
            </dl>
            <dl v-if="arrnww">
              <dt>{{ arrnww.name }}</dt>
              <dd>
                <span
                  v-for="(item, index) in arrnww.values"
                  :key="index"
                  @click="Sizespan(item)"
                  :class="{ selected: item.checked, disable: item.disable }"
                >
                  {{ item.name }}</span
                >
              </dd>
            </dl>
          </div>
          <div class="xtx-numbox">
            <div class="label">数量</div>
            <div class="numbox">
              <a href="javascript:;" @click="addveeb('-')">-</a>
              <input type="text" v-model="num" />
              <a href="javascript:;" @click="addveeb('+')">+</a>
            </div>
          </div>
          <button
            class="xtx-button ellipsis middle primary"
            style="margin-top: 20px"
            @click="addCar"
          >
            加入购物车
          </button>
        </div>
      </div>
      <div class="goods-relevant">
        <div class="header">
          <i class="icon"></i><span class="title">猜你喜欢</span>
        </div>
        <!-- 轮播图区块 -->
        <div class="xtx-carousel" v-if="arrgos.length > 0">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item>
              <ul class="carousel-body">
                <li class="carousel-item fade">
                  <div class="slider">
                    <a
                      href="javascript:;"
                      v-for="(item, index) in arrgos.slice(0, 4)"
                      :key="index"
                    >
                      <img :src="item.picture" alt="" />
                      <p class="name ellipsis">{{ item.name }}</p>
                      <p class="price">¥{{ item.price }}</p>
                    </a>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item>
              <ul class="carousel-body">
                <li class="carousel-item fade">
                  <div class="slider">
                    <a
                      href="javascript:;"
                      v-for="(item, index) in arrgos.slice(4, 8)"
                      :key="index"
                    >
                      <img :src="item.picture" alt="" />
                      <p class="name ellipsis">{{ item.name }}</p>
                      <p class="price">¥{{ item.price }}</p>
                    </a>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item>
              <ul class="carousel-body">
                <li class="carousel-item fade">
                  <div class="slider">
                    <a
                      href="javascript:;"
                      v-for="(item, index) in arrgos.slice(8, 12)"
                      :key="index"
                    >
                      <img :src="item.picture" alt="" />
                      <p class="name ellipsis">{{ item.name }}</p>
                      <p class="price">¥{{ item.price }}</p>
                    </a>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item>
              <ul class="carousel-body">
                <li class="carousel-item fade">
                  <div class="slider">
                    <a
                      href="javascript:;"
                      v-for="(item, index) in arrgos.slice(12, 16)"
                      :key="index"
                    >
                      <img :src="item.picture" alt="" />
                      <p class="name ellipsis">{{ item.name }}</p>
                      <p class="price">¥{{ item.price }}</p>
                    </a>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="goods-footer">
        <div class="goods-article">
          <div class="goods-tabs">
            <div class="goods-tabs">
              <nav>
                <a
                  href="javascript:;"
                  @click="clk(1)"
                  :class="{ ac: tabInd == 1 }"
                  >商品详情</a
                >
                <a
                  href="javascript:;"
                  @click="clk(2)"
                  :class="{ ac: tabInd == 2 }"
                  >商品评价
                  <span>({{ evaluate.evaluateCount }})</span>
                </a>
              </nav>
              <div class="goods-detail" v-if="ifQh">
                <ul class="attrs">
                  <li v-for="(m, i) in arrzd.properties" :key="i">
                    <span class="dt">{{ m.name }}</span>
                    <span class="dd">{{ m.value }}</span>
                  </li>
                </ul>
                <img
                  :src="m"
                  alt=""
                  v-for="(m, i) in arrzd.pictures"
                  :key="i"
                />
              </div>
              <apppingjia v-else></apppingjia>
            </div>
          </div>
        </div>
        <div class="goods-aside">
          <div class="goods-hot">
            <h3>24小时热销榜</h3>
            <div>
              <a
                href="javascript:;"
                v-for="item in arr2"
                :key="item.id"
                class="goods-item"
              >
                <img alt="" :src="item.picture" />
                <p class="name ellipsis">{{ item.name }}</p>
                <p class="desc ellipsis">{{ item.desc }}</p>
                <p class="price">¥{{ item.price }}</p>
              </a>
            </div>
          </div>
          <div class="goods-hot">
            <h3>周热销榜</h3>
            <div>
              <a
                href="javascript:;"
                v-for="item in arr1"
                :key="item.id"
                class="goods-item"
              >
                <img alt="" :src="item.picture" />
                <p class="name ellipsis">{{ item.name }}</p>
                <p class="desc ellipsis">{{ item.desc }}</p>
                <p class="price">¥{{ item.price }}</p>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="goods-warn">
        <div class="goods-warn">
          <h3>注意事项</h3>
          <p class="tit">• 购买运费如何收取？</p>
          <p>
            单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费)
          </p>
          <br />
          <p class="tit">• 使用什么快递发货?</p>
          <p>默认使用顺丰快递发货(个别商品使用其他快递）</p>
          <p>配送范围覆盖全国大部分地区(港澳台地区除外）</p>
          <br />
          <p class="tit">• 如何申请退货?</p>
          <p>
            1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；
          </p>
          <p>2.内裤和食品等特殊商品无质量问题不支持退货；</p>
          <p>
            3.退货流程：
            确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；
          </p>
          <p>
            4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。
          </p>
        </div>
      </div>
    </div>
    <appfooter></appfooter>
  </div>
</template>
<script>
import appheader from "@/page/index/header.vue";
import apphead from "@/page/index/headerNav.vue";
import appfooter from "@/page/index/foooter.vue";
import apppingjia from "@/page/index/progouct/pingjia.vue";
export default {
  data() {
    return {
      banner: [],
      Head: [],
      pageSize: 10,
      page: 1,
      ifQh: true,
      inde: 1,
      arr: [], //通过id传递过来的数据
      arrzd: [], // pictures  details里面所有的图片
      arrnww: [], //尺码
      arrnuw: [], //颜色
      arrgos: [], // 轮播区域的十六张图的数据
      arr1: [], // 右下角侧边栏第一条数据
      arr2: [], //右下角侧边栏第二条数据
      evaluate: [],
      edit: [],
      areaList: [],
      areaList2: [],
      str: "",
      showareaList: false,
      strareaList: "北京市 市辖区 东城区",
      tabInd: 1,
      num: 1, // 数量
      srcstr: "", //默认第一张图
      srcs: "", //默认第一张图
      coverLayerImg: {
        //放大镜
        transform: "",
      },
      coverLayerStyle: {
        //放大镜
        transform: "",
      },
      coverLayerShow: false, //控制小盒子和右边放大区域的显示隐藏
      skuid: "",
      valueNames: [],
    };
  },
  components: {
    appheader,
    apphead,
    appfooter,
    apppingjia,
  },
  methods: {
    getbanner() {
      this.axios
        .get("https://apipc-xiaotuxian-front.itheima.net/home/banner")
        .then((res) => {
          if (res.data.msg == "操作成功") {
            this.banner = res.data.result;
          }
        });
    },
    getHead() {
      this.axios
        .get("https://apipc-xiaotuxian-front.itheima.net/home/category/head")
        .then((res) => {
          if (res.data.msg == "操作成功") {
            this.Head = res.data.result;
          }
        });
    },
    enterHandler() {
      // 层罩及放大空间的显示
      this.coverLayerShow = true;
    },
    srcmoer(m) {
      this.srcstr = m;
    },
    // 鼠标移动
    moveHandler(e) {
      var l = e.offsetX - 100;
      var t = e.offsetY - 100;
      if (l < 0) {
        l = 0;
      }
      if (l > 200) {
        l = 200;
      }
      if (t <= 0) {
        t = 0;
      }
      if (t > 200) {
        t = 200;
      }

      this.coverLayerStyle.transform = `translate(${l}px,${t}px)`;
      this.coverLayerImg.transform = `translate(${-2 * l}px,${-2 * t}px)`;
    },
    // 鼠标移出函数
    outHandler() {
      // 控制层罩与放大空间的隐藏
      this.coverLayerShow = false;
    },
    imgactive(item) {
      this.arrnuw.values.forEach((itm) => {
        if (item == itm) {
          item.checked = !item.checked;
        } else {
          itm.checked = false;
          itm.disabled = false;
        }
      });
      this.arrnuw.values = this.arrnuw.values.slice(0);
      var list = [];
      for (var j = 0; j < this.arr.skus.length; j++) {
        this.arr.skus[j].specs.forEach((key, index) => {
          if (item.name == key.valueName) {
            console.log(item.name, key.valueName);
            this.arr.skus[j].specs.forEach((k, ind) => {
              if (k.valueName != item.name) {
                list.push(k.valueName);
              }
            });
          }
        });
      }
      this.valueNames = [];
      this.arr.specs.forEach((i) => {
        i.values.forEach((item) => {
          if (item.checked == true) {
            console.log(item);
            this.valueNames.push(item.name);
          }
        });
      });
      console.log(this.valueNames);
      for (var i = 0; i < this.arr.skus.length; i++) {
        var skuArr = [];
        this.arr.skus[i].specs.forEach((k) => {
          skuArr.push(k.valueName);
        });
        if (JSON.stringify(skuArr) == JSON.stringify(this.valueNames)) {
          console.log(this.arr.skus[i].id);
          this.skuid = this.arr.skus[i].id;
        }
      }
    },
    Sizespan(item) {
      this.arrnww.values.forEach((itm) => {
        if (item == itm) {
          item.checked = !item.checked;
        } else {
          itm.checked = false;
          itm.disabled = false;
        }
      });
      this.arrnww.values = this.arrnww.values.slice(0);

      var list = [];
      for (var j = 0; j < this.arr.skus.length; j++) {
        this.arr.skus[j].specs.forEach((key, index) => {
          if (item.name == key.valueName) {
            this.arr.skus[j].specs.forEach((k, ind) => {
              if (k.valueName != item.name) {
                list.push(k.valueName);
              }
            });
          }
        });
      }
      this.valueNames = [];
      this.arr.specs.forEach((i) => {
        i.values.forEach((item) => {
          if (item.checked == true) {
            this.valueNames.push(item.name);
          }
        });
      });
      for (var i = 0; i < this.arr.skus.length; i++) {
        var skuArr = [];
        this.arr.skus[i].specs.forEach((k) => {
          skuArr.push(k.valueName);
        });
        if (JSON.stringify(skuArr) == JSON.stringify(this.valueNames)) {
          console.log(this.arr.skus[i].id);
          this.skuid = this.arr.skus[i].id;
        }
      }
    },
    addveeb(str) {
      if (str == "+") {
        this.num++;
      }
      if (str == "-") {
        this.num--;
      }
    },
    handleSizeChange(val) {
      console.log(val);
    },
    handleCurrentChange(i) {
      console.log(i);
      this.page = i;
    },
    clk(n) {
      this.tabInd = n;
      if (n == 1) {
        this.ifQh = true;
      }
      if (n == 2) {
        this.ifQh = false;
      }
    },
    ckHandle(i) {
      this.inde = i;
    },
    clkareaList() {
      this.showareaList = !this.showareaList;
    },
    optionElsp(item, index) {
      this.areaList = this.areaList[index].areaList;
      this.str += item + "  ";
      this.strareaList = this.str;
      if (this.areaList == undefined) {
        this.showareaList = false;
        this.areaList = this.areaList2.slice(0);
        this.str = "";
      }
    },
    addCar() {
      if (!this.$store.state.login.logo.token) {
        alert("请登录后再添加");
      }
      if (this.valueNames.length == this.arr.specs.length) {
        this.axios
          .post(
            "https://apipc-xiaotuxian-front.itheima.net/member/cart",
            { count: this.num, skuId: this.skuid },
            {
              headers: {
                Authorization: "Bearer " + this.$store.state.login.logo.token,
              },
            }
          )
          .then((res) => {
            if (res.data.msg == "操作成功") {
              this.$message({
                message: "添加购物车成功",
                type: "success",
              });
            }
          });
      } else {
        alert("请选择规格尺寸");
      }
    },
  },
  mounted() {
    var id = this.$route.params.id;
    this.getHead();
    this.$watch(() => {
      this.axios(
        `https://apipc-xiaotuxian-front.itheima.net/goods?id=${id}`
      ).then((res) => {
        if (res.data.msg == "操作成功") {
          this.arr = res.data.result;
          this.srcstr = this.arr.mainPictures[0]; //默认第一张图
          this.srcs = this.arr.mainPictures[0]; //默认第一张图
          this.arrzd = this.arr.details; // pictures  details里面所有的图片
          this.arrnuw = this.arr.specs[0]; //颜色
          this.arrnww = this.arr.specs[1]; //尺码
          this.arrnuw.values.forEach((i) => {
            i.checked = false;
          });
          this.arrnww.values.forEach((i) => {
            i.checked = false;
          });
        }
      });
      this.axios(
        `https://apipc-xiaotuxian-front.itheima.net/goods/relevant?id=${id}&limit=16`
      ).then((res) => {
        if (res.data.msg == "操作成功") {
          this.arrgos = res.data.result;
        }
      });
      this.axios(
        `https://apipc-xiaotuxian-front.itheima.net/goods/hot?id=${id}&limit=3&type=1`
      ).then((res) => {
        if (res.data.msg == "操作成功") {
          this.arr1 = res.data.result;
        }
      });
      this.axios(
        `https://apipc-xiaotuxian-front.itheima.net/goods/hot?id=${id}&limit=3&type=2`
      ).then((res) => {
        if (res.data.msg == "操作成功") {
          this.arr2 = res.data.result;
        }
      });
      this.axios(
        "https://mock.boxuegu.com/mock/1175/goods/1147023/evaluate"
      ).then((res) => {
        if (res.data.msg == "查询成功") {
          this.evaluate = res.data.result;
        }
      });
      this.axios(
        `https://mock.boxuegu.com/mock/1175/goods/1147023/evaluate/page?page=${this.page}&pageSize=${this.pageSize}`
      ).then((res) => {
        if (res.statusText == "OK") {
          this.edit = res.data.result;
        }
      });
      this.axios(
        `https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json`
      ).then((res) => {
        if (res.statusText == "OK") {
          this.areaList = res.data;
          this.areaList2 = res.data;
        }
      });
    });
  },
};
</script>
<style scoped>
@import url(../index.css);
.cont >>> .swiper-button-prev {
  left: 10px;
}

.ac {
  border-bottom: 1px solid #27ba9b;
}

.act {
  color: #27ba9b;
}

.xtx-city {
  position: relative;
}

.value {
  font-size: 12px !important;
}

.bgf {
  background-color: #fff;
}

.disable {
  opacity: 0.6 !important;
  border-style: dashed !important;
  cursor: not-allowed !important;
}

.option {
  width: 562px;
  border: 1px solid #e4e4e4;
  position: absolute;
  left: 0;
  top: 29px;
  background: #fff;
  min-height: 30px;
  line-height: 30px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.option > span {
  width: 130px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 3px;
  font-size: 12px;
  border: 0 !important;
  margin-right: 5px !important;
  padding: 0 !important;
}

.option > span:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
}

.sz {
  margin-right: 15px;
}

.xtx-bread {
  display: flex;
  padding: 25px 10px;
}

.span {
  padding: 5px 20px;
  color: #666;
  border: 2px solid #f5f5f5;
  margin-right: 10px;
}

.img {
  width: 40px;
  height: 40px;
}

.imgactive {
  border: 1px solid #27ba9b !important;
}

.active {
  background-color: #27ba9b;
  color: #fff;
}

.coverLayerRightImg {
  display: inline-block;
  width: 800px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
}

/* 右边的区域图片放大空间 */
.coverLayerRight {
  background-color: #ffffff;
  width: 400px;
  height: 400px;
  border: 1px solid #dcdcdc;
  position: relative;
  overflow: hidden;
  position: absolute;
  left: 412px;
  top: 0;
  z-index: 1001;
}

/* 一个最高层层罩 */
.coverLayerMaskTop {
  width: 400px;
  height: 400px;
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  cursor: move;
}

/* 层罩，通过定位将左上角定位到(0,0) */
.coverLayerMouse {
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
}

.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
}

.spandiv {
  font-size: 13px;
}

.goods-sku dl {
  display: flex;
  padding-bottom: 20px;
  align-items: center;
}

.goods-sku dl dd > img {
  width: 50px;
  height: 50px;
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
}

.goods-sku dl dd {
  flex: 1;
  color: #666;
}

.goods-sku dl dd > span {
  display: inline-block;
  height: 30px;
  line-height: 28px;
  padding: 0 20px;
  border: 1px solid #e4e4e4;
  cursor: pointer;
}

span {
  margin-right: 5px !important;
}

.ddd ul {
  display: flex;
}

.ddd img {
  width: 50px;
  height: 50px;
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
}

.container {
  margin: 0 auto;
}

* {
  margin: 0;
  padding: 0;
}

.goods-relevant {
  background: #fff;
  min-height: 460px;
  margin-top: 20px;
}

.goods-relevant .header {
  height: 80px;
  line-height: 80px;
  padding: 0 20px;
}

.goods-relevant .header .title {
  font-size: 20px;
  padding-left: 10px;
}

.goods-relevant .header .icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-top: 4px solid #27ba9b;
  border-right: 4px solid #27ba9b;
  box-sizing: border-box;
  position: relative;
  transform: rotate(45deg);
}

.goods-relevant .header .icon:before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  left: 0;
  top: 2px;
  background: #bcf1e6;
}

.xtx-carousel {
  height: 380px;
}

.xtx-carousel .carousel-indicator {
  bottom: 30px;
}

.xtx-carousel .carousel-indicator span.active {
  background: #27ba9b;
}

.xtx-carousel .carousel-btn {
  top: 110px;
  opacity: 1;
  background: transparent;
  color: #ddd;
}

.xtx-carousel .carousel-btn i {
  font-size: 30px;
}

.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;
  z-index: 500;
}

.goods-image #large {
  position: absolute;
  top: 0;
  left: 412px;
  width: 400px;
  height: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-repeat: no-repeat;
  background-size: 800px 800px;
  background-color: #f8f8f8;
  z-index: 100;
}

.goods-image .middle {
  width: 400px;
  height: 400px;
  background: #f5f5f5;
  position: relative;
  cursor: move;
}

.goods-image .middle img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

.goods-image .middle .layer {
  width: 200px;
  height: 200px;
  /* background: rgba(0, 0, 0, .2); */
  background: #000;
  left: 0 !important;
  top: 0 !important;
  position: absolute;
  z-index: 1000;
}

.goods-image #small {
  position: relative;
  width: 80px;
}

.goods-image #small li {
  width: 68px;
  height: 68px;
  margin-left: 12px;
  margin-bottom: 15px;
  cursor: pointer;
}

.goods-image #small li img {
  width: 68px;
  height: 68px;
}

.goods-image #small li.active,
.goods-image #small li:hover {
  border: 2px solid #27ba9b;
}

.hover {
  border: 2px solid #27ba9b;
}

.goods-sales {
  display: flex;
  width: 400px;
  align-items: center;
  text-align: center;
  height: 140px;
}

.goods-sales li {
  flex: 1;
  position: relative;
}

.goods-sales li ~ li:after {
  position: absolute;
  top: 10px;
  left: 0;
  height: 60px;
  border-left: 1px solid #e4e4e4;
  content: "";
}

.goods-sales li p:first-child {
  color: #999;
}

.goods-sales li p:nth-child(2) {
  color: #cf4444;
  margin-top: 10px;
}

.goods-sales li p:last-child {
  color: #666;
  margin-top: 10px;
}

.goods-sales li p:last-child i {
  color: #27ba9b;
  font-size: 14px;
  margin-right: 2px;
}

.goods-sales li p:last-child:hover {
  color: #27ba9b;
  cursor: pointer;
}

.g-name {
  font-size: 22px;
}

.g-desc {
  color: #999;
  margin-top: 10px;
}

.g-price {
  margin-top: 10px;
}

.g-price span:before {
  content: "";
  font-size: 14px;
}

.g-price span:first-child {
  color: #cf4444;
  margin-right: 10px;
  font-size: 22px;
}

.g-price span:last-child {
  color: #999;
  text-decoration: line-through;
  font-size: 16px;
}

.g-service {
  background: #f5f5f5;
  width: 500px;
  padding: 20px 10px 0 10px;
  margin-top: 10px;
}

.g-service dl {
  padding-bottom: 20px;
  display: flex;
  align-items: center;
}

.g-service dl dt {
  width: 50px;
  color: #999;
}

.g-service dl dd {
  flex: 1;
  align-items: center;
  display: flex;
  font-size: 14px;
  color: #666;
}

.g-service dl dd:last-child span {
  margin-right: 10px;
  display: inline-block;
  height: 30px;
  line-height: 28px;
  padding: 0 20px;
  border: 1px solid #e4e4e4;
  cursor: pointer;
}

.g-service dl dd:last-child span:before {
  content: "";
  color: #27ba9b;
  margin-right: 2px;
}

.g-service dl dd:last-child a {
  color: #27ba9b;
}

.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
}

.goods-sku dl {
  display: flex;
  padding-bottom: 20px;
  align-items: center;
}

.goods-sku dl dt {
  width: 50px;
  color: #999;
}

.goods-sku dl dd {
  flex: 1;
  color: #666;
}

.goods-sku dl dd > img {
  width: 50px;
  height: 50px;
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
}

.selected {
  border-color: #27ba9b !important;
}

.goods-sku dl dd > img.disabled {
  opacity: 0.6;
  border-style: dashed;
  cursor: not-allowed;
}

.goods-sku dl dd > span {
  display: inline-block;
  height: 30px;
  line-height: 28px;
  padding: 0 20px;
  border: 1px solid #e4e4e4;
  margin-top: 10px;
  cursor: pointer;
}

.goods-sku dl dd > span.disabled {
  opacity: 0.6;
  border-style: dashed;
  cursor: not-allowed;
}

.goods-detail {
  padding: 40px;
}

.goods-detail .attrs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.goods-detail .attrs li {
  display: flex;
  margin-bottom: 10px;
  width: 50%;
}

.goods-detail .attrs li .dt {
  width: 100px;
  color: #999;
}

.goods-detail .attrs li .dd {
  flex: 1;
  color: #666;
}

.goods-detail > img {
  width: 100%;
}

.goods-comment-image .list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.goods-comment-image .list a {
  width: 120px;
  height: 120px;
  border: 1px solid #e4e4e4;
  margin-right: 20px;
  margin-bottom: 10px;
}

.goods-comment-image .list a img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.goods-comment-image .list a.active {
  border-color: #27ba9b;
}

.preview {
  width: 480px;
  height: 480px;
  border: 1px solid #e4e4e4;
  background: #f8f8f8;
  margin-bottom: 20px;
  position: relative;
}

.preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.preview i {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: center;
  line-height: 30px;
}

.goods-comment .head {
  display: flex;
  padding: 30px 0;
}

.goods-comment .head .data {
  width: 340px;
  display: flex;
  padding: 20px;
}

.goods-comment .head .data p {
  flex: 1;
  text-align: center;
}

.goods-comment .head .data p span {
  display: block;
}

.goods-comment .head .data p span:first-child {
  font-size: 32px;
  color: #cf4444;
}

.goods-comment .head .data p span:last-child {
  color: #999;
}

.goods-comment .head .tags {
  flex: 1;
  display: flex;
  border-left: 1px solid #f5f5f5;
}

.goods-comment .head .tags .dt {
  font-weight: 700;
  width: 100px;
  text-align: right;
  line-height: 42px;
}

.goods-comment .head .tags .dd {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.goods-comment .head .tags .dd > a {
  width: 132px;
  height: 42px;
  margin-left: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  border: 1px solid #e4e4e4;
  background: #f5f5f5;
  color: #999;
  text-align: center;
  line-height: 40px;
}

.goods-comment .head .tags .dd > a:hover {
  border-color: #27ba9b;
  background: #e6faf6;
  color: #27ba9b;
}

.goods-comment .head .tags .dd > a.active {
  border-color: #27ba9b;
  background: #27ba9b;
  color: #fff;
}

.goods-comment .sort {
  height: 60px;
  line-height: 60px;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  margin: 0 20px;
  color: #666;
}

.goods-comment .sort > span {
  margin-left: 20px;
}

.goods-comment .sort > a {
  margin-left: 30px;
}

.goods-comment .sort > a.active,
.goods-comment .sort > a:hover {
  color: #27ba9b;
}

.goods-comment .list {
  padding: 0 20px;
}

.goods-comment .list .item {
  display: flex;
  padding: 25px 10px;
  border-bottom: 1px solid #f5f5f5;
}

.goods-comment .list .item .user {
  width: 160px;
}

.goods-comment .list .item .user img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.goods-comment .list .item .user span {
  padding-left: 10px;
  color: #666;
}

.goods-comment .list .item .body {
  flex: 1;
}

.goods-comment .list .item .body .score {
  line-height: 40px;
}

.goods-comment .list .item .body .score .iconfont {
  color: #ff9240;
  padding-right: 3px;
}

.goods-comment .list .item .body .score .attr {
  padding-left: 10px;
  color: #666;
}

.goods-comment .list .item .text {
  color: #666;
  line-height: 24px;
}

.goods-comment .list .item .time {
  color: #999;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.goods-tabs {
  min-height: 600px;
  background: #fff;
}

.goods-tabs nav {
  height: 70px;
  line-height: 70px;
  display: flex;
  border-bottom: 1px solid #f5f5f5;
  background: #fff !important;
}

.goods-tabs nav a {
  padding: 0 40px;
  font-size: 18px;
  position: relative;
  color: #000 !important;
  background: #fff !important;
}

.goods-tabs nav a > span {
  color: #cf4444;
  font-size: 16px;
  margin-left: 10px;
}

.goods-tabs nav a:first-child {
  border-right: 1px solid #f5f5f5;
}

.goods-tabs nav a.active:before {
  content: "";
  position: absolute;
  left: 40px;
  bottom: -1px;
  width: 72px;
  height: 2px;
  background: #27ba9b;
}

.goods-item {
  display: block;
  width: 280px;
  padding: 20px 30px;
  text-align: center;
  transition: all 0.5s;
  background: #fff;
  margin-bottom: 10px;
}

.goods-item:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.goods-item img {
  width: 160px;
  height: 160px;
}

.goods-item p {
  padding-top: 10px;
}

.goods-item .name {
  font-size: 16px;
}

.goods-item .desc {
  color: #999;
  height: 29px;
}

.price {
  color: #cf4444;
  margin-top: 10px;
  font-size: 20px;
}

.goods-hot h3 {
  height: 70px;
  background: #e26237;
  color: #fff;
  font-size: 18px;
  line-height: 70px;
  padding-left: 25px;
  margin-bottom: 10px;
  font-weight: 400;
}

.goods-hot.goods-item {
  background: #fff;
  width: 100%;
  margin-bottom: 10px;
}

.goods-hot .goods-item img {
  width: 200px;
  height: 200px;
}

.goods-hot .goods-item p {
  margin: 0 10px;
}

.goods-hot .goods-item:hover {
  transform: none;
  box-shadow: none;
}

.goods-warn {
  margin-top: 20px;
  background: #fff;
  padding-bottom: 40px;
}

.goods-warn h3 {
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid #f5f5f5;
  padding-left: 50px;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 10px;
}

.goods-warn p {
  line-height: 40px;
  padding: 0 25px;
  color: #666;
}

.goods-warn p.tit {
  color: #333;
}

.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
}

.goods-info .media {
  width: 580px;
  height: 600px;
  padding: 30px 50px;
}

.goods-info .spec {
  flex: 1;
  padding: 30px 30px 30px 0;
}

.goods-footer {
  display: flex;
  margin-top: 20px;
}

.goods-footer .goods-article {
  width: 940px;
  margin-right: 20px;
}

.goods-footer .goods-aside {
  width: 280px;
  min-height: 1000px;
}

.xtx-numbox {
  display: flex;
  align-items: center;
}

.label {
  width: 60px;
  color: #999;
  padding-left: 10px;
}

.numbox input {
  width: 60px;
  padding: 0 5px;
  text-align: center;
  color: #666;
}

.numbox {
  width: 120px;
  height: 30px;
  border: 1px solid #e4e4e4;
  display: flex;
}

.numbox a {
  width: 29px;
  line-height: 28px;
  text-align: center;
  background: #f8f8f8;
  font-size: 16px;
  color: #666;
}

.primary {
  margin-top: 20px;
  border-color: #27ba9b;
  background: #27ba9b;
  color: #fff !important;
  width: 180px;
  height: 50px;
  font-size: 16px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.slider {
  display: flex;
  justify-content: space-around;
  /* padding: 0 40px; */
}

.slider a {
  width: 240px;
  text-align: center;
  color: #333;
  line-height: 1;
}

.slider a img {
  padding: 20px;
  width: 230px !important;
  height: 230px !important;
}

.slider .name,
.ellipsis {
  font-size: 16px;
  color: #666;
  font-weight: 400;
  /* padding: 0 40px; */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>